<template>
  <div id="main">

    <div class="img-div">
      <img :src="str_icon" alt="">
    </div>

    <div class="app-info-div">
      <span>
        {{app_info.app_name}}
      </span>
    </div>

    <div class="update-app-div info-div">
      <div class="left-div">当前版本</div>
      <div class="right-div">{{app_info.app_version}}</div>
    </div>

  </div>
</template>

<script>

export default {
  name: "InfoView",
  data(){
    return {
      // app_info: {
      //   app_name: 'L录制工具',
      //   app_version: 'x.x.x'
      // },
    }
  },
  mounted() {

  },
  computed: {
    str_icon: () => {
      // 从安卓获取转换成base64编码的图片的字符串
      const imgStr=window.android.getIcon()
      return `data:image/jpeg;base64,${imgStr}`
    },
    app_info: () => {
      const infoStr=window.android.getAppInfo()

      const app_info=JSON.parse(infoStr)
      return app_info
    }
  }
}
</script>

<style scoped>

#main{
  display: flex;
  flex-direction: column;
  font-size: 1.5rem;

  /*height: 100%;*/
}
.img-div{
  flex: 3;
  text-align: center;
  /*background: #cccccc;*/
  padding: 1rem;
}
.img-div img{
  border-radius: 50%;
}
.app-info-div{
  flex: 1;
  text-align: center;
  padding: 0.5rem;
  margin-bottom: 3rem;
}
.info-div{
  display: flex;
  padding: 1rem 2rem;
  border-top: 2px solid #cccccc;
  border-bottom: 2px solid #cccccc;
}
.info-div div{
  flex: 1;
}
.info-div .right-div{
  text-align: right;
}
</style>